<DocMatMenu></DocMatMenu>

<h5 class="mat-h5">RefBack Example</h5>

<DemoContainer>
    <Content>
        @using Microsoft.AspNetCore.Components

        <p>
            <MatButton Label="Menu" OnClick="@OnClick" RefBack="@buttonForwardRef"></MatButton>
            <MatMenu @ref="Menu"  TargetForwardRef="@buttonForwardRef">
                <MatList>
                    <MatListItem>Item 1</MatListItem>
                    <MatListItem>Item 2</MatListItem>
                    <MatListItem>Item 3</MatListItem>
                    <MatListItem>Item 4</MatListItem>
                    <MatListItem>Item 5</MatListItem>
                </MatList>
            </MatMenu>
        </p>

        @code
        {
            ForwardRef buttonForwardRef = new ForwardRef();
            BaseMatMenu Menu;

            public void OnClick(MouseEventArgs e)
            {
                this.Menu.OpenAsync();
            }

        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        @using Microsoft.AspNetCore.Components

        <p>
            <MatButton Label=""Menu"" OnClick=""@OnClick"" RefBack=""@buttonForwardRef""></MatButton>
            <MatMenu @ref=""Menu""  TargetForwardRef=""@buttonForwardRef"">
                <MatList>
                    <MatListItem>Item 1</MatListItem>
                    <MatListItem>Item 2</MatListItem>
                    <MatListItem>Item 3</MatListItem>
                    <MatListItem>Item 4</MatListItem>
                    <MatListItem>Item 5</MatListItem>
                </MatList>
            </MatMenu>
        </p>

        @code
        {
            ForwardRef buttonForwardRef = new ForwardRef();
            BaseMatMenu Menu;

            public void OnClick(MouseEventArgs e)
            {
                this.Menu.OpenAsync();
            }

        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">Example</h5>

<DemoContainer>
    <Content>
        <p>
            <MatButton Label="Menu" OnClick="@OnClick2" @ref="Button2" ></MatButton>
            <MatMenu @ref="Menu2" >
                <MatList>
                    <MatListItem>Item 1</MatListItem>
                    <MatListItem>Item 2</MatListItem>
                    <MatListItem>Item 3</MatListItem>
                    <MatListItem>Item 4</MatListItem>
                    <MatListItem>Item 5</MatListItem>
                </MatList>
            </MatMenu>
        </p>

        @code
        {
            MatButton Button2;
            BaseMatMenu Menu2;

            public void OnClick2(MouseEventArgs e)
            {
                this.Menu2.OpenAsync(Button2.Ref);
            }

        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <p>
            <MatButton Label=""Menu"" OnClick=""@OnClick2"" @ref=""Button2"" ></MatButton>
            <MatMenu @ref=""Menu2"" >
                <MatList>
                    <MatListItem>Item 1</MatListItem>
                    <MatListItem>Item 2</MatListItem>
                    <MatListItem>Item 3</MatListItem>
                    <MatListItem>Item 4</MatListItem>
                    <MatListItem>Item 5</MatListItem>
                </MatList>
            </MatMenu>
        </p>

        @code
        {
            MatButton Button2;
            BaseMatMenu Menu2;

            public void OnClick2(MouseEventArgs e)
            {
                this.Menu2.OpenAsync(Button2.Ref);
            }

        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>